/**
 * @description 描述函数的功能:通过指定选择器获取
 * @param {string} selector 
 * @param {boolean} flag 
 * @returns 函数对象
 */
// 方法一：使用标杆思想
function $(selector, isAll = false) {
    if (flag) {
        return document.querySelectorAll(selector);
    } else {
        return document.querySelector(selector);
    }
}
// 方法二：
function $(selector) {
    let nodeList = document.querySelectorAll(selector);
    if (nodeList.length === 0) {
        return console.warn(`${selector}没有获取到节点`)
    }
    if (nodeList.length === 1) {
        return nodeList[0];
    }
    if (nodeList.length > 1) {
        return nodeList;
    }
}


/**
 * @description 登录框选项卡切换功能
 * @param {*} tabSelector  标题节点--选择器
 * @param {*} tabClassName 激活样式类名
 * @param {*} contSelector  内容区域节点--选择器
 * @param {*} contClassName 内容显示后隐藏的类名样式
 */
// 1.实现基本功能
// 2.确定函数名--tab()
// 3.确定函数参数--tabSelector,tabClassName,contSelector,contClassName
// 4.确定函数返回值--不需要
// 5.将功能代码放入函数壳子，替换对应变量
function tab(tabSelector, tabClassName, contSelector, contClassName) {
    // 1.获取相关节点
    // $('#tabList li')
    // 2.给每个li绑定点击事件
    $(tabSelector).forEach(function (v, i) {
        v.addEventListener("click", function () {
            // 3.先排他，移除所有的激活样式
            $(tabSelector).forEach(function (item, index) {
                item.classList.remove(tabClassName);
                // 通过对应的索引让卡片内容消失
                if (contSelector) {
                    $(contSelector)[index].classList.remove(contClassName);
                }
            });
            // 4.再给自己增加激活样式
            this.classList.add(tabClassName);
            // 功能五：点击tab显示对应的内容
            // 1.获取相关节点
            // $("#contLt div");
            // 2.让所有的卡片内容消失
            // 3.点击li通过对应的索引显示对应的卡片内容
            if (contSelector) {
                $(contSelector)[i].classList.add(contClassName);
            }
        });
    });
}
// 6.调用测试
// 7.优化代码








/**
    * @description 失去焦点，进行正则验证
    * @param {string} nodeSelector 选择器名，添加事件（blur）的结点名
    * @param {*} parrent 正则表达式 如：/^[a-zA-Z0-9]{6,20}$/
    * @param {*} text 提示的内容
    * @param {*} flag 控制节点是否创建
    */

function vertify(nodeSelector, parrent, text, flag) {
    let string = $(nodeSelector).value;
    // 判断输入框中的值是否符合正则模式
    if (!parrent.test(string)) {
        // 不符合,提示错误信息
        // flag--1创建节点
        flag == 1 ? createNode($(nodeSelector).parentNode, "span", text) : "";
        flag = 0;
    } else {
        // 清除错误信息，flag--1
        if (flag == 0) {
            let nextbrother = $(nodeSelector).nextElementSibling;
            nextbrother.nodeName == "SPAN" ? nextbrother.remove() : nextbrother.nextElementSibling.remove();
        }
        flag = 1;
    }
    return flag;//flag为0--代表已经创建了节点（有错误信息）
}


/**
 * @description 创建节点的函数
 * @param {*} parentNode 父节点的选择器名
 * @param {*} node 创建节点的标签名
 * @param {*} content 提示的内容
 */

function createNode(parentNode, nodeName, content) {
    let newNode = document.createElement(nodeName);
    newNode.innerHTML = content;
    parentNode.append(newNode);
}


